<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-HelloWorld</title>
    <script src="react.development.js" type="text/javascript" charset="UTF-8"></script>
    <script src="react-dom.development.js" type="text/javascript" charset="UTF-8"></script>
    <script src="babel.min.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script type="text/babel">
    //写法1、使用静态元素
    //ReactDOM.render(
    //   <h1>Hello World</h1>,
    //    document.getElementById("app")
    //);

    //写法2、使用元素变量
    //const element = <h1>Hello World</h1>;//react元素(只能有一个根元素)
    //ReactDOM.render(
    //    element,
    //    document.getElementById("app")
    //);

    //写法3、元素变量可以通过{}使用其他变量
    // const content01 = "Hello";
    // const content02 = "World";
    // const element = <h1>{content01 + " " + content02}</h1>;//react元素(只能有一个根元素)
    // ReactDOM.render(
    //     element,
    //     document.getElementById("app")
    // );

    //写法4、方法的返回值可以是react元素
    const user = {
        firstName: "Hello",
        lastName: "World"
    };
    function getElememt(user){
        if(user){
            return <h1>{user.firstName + " " + user.lastName + "-User"}</h1>;
        }
        else{
            return <h1>Hello World-Default</h1>;
        }
    }
    ReactDOM.render(
        getElememt(user),
        document.getElementById("app")
    );

    //写法5、16.14.0版本和17.0.1版本都能用，此写法不需要引入babel
    //ReactDOM.render(
    //    React.createElement("h1","","Hello World"),
    //    document.getElementById("app")
    //);
</script>
</html>